<template>
  <div class="reduceContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="reduceMain">
      <el-card style="background: black;">
        <div class="content">
          <div class="left">
            <el-form>
              <el-form-item label="" prop="content" label-width="5px">
                <el-input show-word-limit v-model="beautifyBefore" placeholder="请输入内容" type="textarea" />
              </el-form-item>
            </el-form>
          </div>
          <div class="main">
            <el-button type="warning" style="width: 150px;height: 50px;border-radius: 8px;margin-bottom: 15px;" @click="onturn">
              转换
            </el-button>
            <el-button type="danger" style="width: 150px;height: 50px;border-radius: 8px;margin-right: 10px;" @click="clean">
              清空
            </el-button>
          </div>
          <div class="right">
            <el-form>
              <el-form-item label="" prop="content" label-width="5px">
                <el-input show-word-limit v-model="beautifyAfter" placeholder="请输入内容后等待" type="textarea" disabled />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const beautifyBefore = ref<string>('')
const beautifyAfter = ref<string>('')


const iGetInnerText = (Str: string) => {
  let resultStr = ''
  let str = Str
  //清除颜色
  str = str.replace(/]*>/gi,"");
  str = str.replace(/<\/FONT>/gi,"");
  //清除样式
  str = str.replace(/]*?>[\s\S]*?<\/STYLE>/gi,"");
  //清除空格
  str = str.replace(/\ +/g, '')
  str = str.replace(/[ ]/g, '')
  str = str.replace(/<(?:[^>'"]*|(['"]).*?\1)*>/g,"");
  str = str.replace(/(\r\n|\n|\r)/gm,"");
  str = str.replace(/[\r\n]/g, '') // 去掉回车换行
  //清除换行
  str = str.replace(/\ufeff/g, '');
  resultStr = str
  return resultStr
}

const onturn = () => {
  const code = iGetInnerText(beautifyBefore.value)
  beautifyAfter.value = code
}

const clean = () => {
  beautifyBefore.value = ''
  beautifyAfter.value = ''
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.reduceContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .reduceMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;

        .left {
          flex: 2;
          padding: 5px;

          :deep(.el-textarea__inner) {
            width: 100%;
            height: 55vh;
            border-radius: 8px;
          }
        }

        .main {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .right {
          flex: 2;
          padding: 5px;

          :deep(.el-textarea__inner) {
            width: 100%;
            height: 55vh;
            border-radius: 8px;
          }
        }
      }
    }
  }

}
</style>